<template>
    <!-- <div class='container'>添加文章对话框</div> -->

    <el-dialog :title="creatTitle" :visible.sync="dialogVisible" width="50%">
        <el-form ref="form" :model="form" label-width="100px" class="form" :rules="rules">
            <el-form-item label="文章标题:" prop="title">
                <el-input v-model="form.title" placeholder="请输入文章标签"></el-input>
            </el-form-item>
            <el-form-item label="文章内容:" class="quill-editor" prop="articleBody">
                <!-- 富文本编辑器 -->
                <quill-editor :options="editorOption" v-model="form.articleBody"></quill-editor>
            </el-form-item>
            <el-form-item label="视频地址:" class="video" prop="videoURL">
                <el-input v-model="form.videoURL" placeholder="请输入视频地址"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="confirm('form')">确认</el-button>
        </span>

    </el-dialog>
</template>

<script>
    // 导入富文本编辑器
    import { quillEditor } from "vue-quill-editor";
    import "quill/dist/quill.core.css";
    import "quill/dist/quill.snow.css";
    import "quill/dist/quill.bubble.css";
    // 导入添加、修改文章接口
    import {
        add,
        update
    } from "@/api/hmmm/articles.js";
    export default {
        // 注册组件
        components: {
            quillEditor
        },
        data() {
            return {
                // 富文本编辑器
                editorOption: {
                    placeholder: "", // 占位文字
                    modules: {
                        toolbar: [
                            ["bold", "italic", "underline", "strike"],
                            [{
                                list: "ordered"
                            }, {
                                list: "bullet"
                            }],
                            ["blockquote", "code-block"],
                            ["image"]
                        ]
                    }
                },
                form: {
                    id: null, // 编号
                    title: "", // 标题
                    articleBody: "", // 内容
                    videoURL: "" // 视频url
                },
                rules: {
                    // 校验规则
                    title: [{
                        required: true,
                        message: "请输入文章标题",
                        trigger: "blur"
                    }],
                    articleBody: [{
                        required: true,
                        message: "请输入文章内容",
                        trigger: "blur"
                    }]
                },
                dialogVisible: false // 控制弹框是否显示
            };
        },
        methods: {
            // 弹层显示
            dialogFromShow() {
                this.dialogVisible = true;
            },
            // 弹层隐藏
            dialogFromHidden() {
                this.dialogVisible = false;
            },
            // 接收
            recive(row) {
                // console.log(row)
                this.form.id = row.id;
                this.form.title = row.title;
                this.form.articleBody = row.articleBody;
                this.form.videoURL = row.videoURL;
            },
            // 表单验证
            confirm(formName) {
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        if (this.form.id) {
                            this.hUpdate();
                        } else {
                            this.hAdd();
                        }
                    } else {
                        // console.log('error submit!!')
                        return false;
                    }
                });
            },
            // 新增数据
            hAdd() {
                const data = {
                    title: this.form.title,
                    articleBody: this.form.articleBody,
                    videoURL: this.form.videoURL
                };
                add(data).then(res => {
                    // console.log(res);
                    this.dialogVisible = false;
                    this.$emit("update-load");
                });
            },
            // 修改数据
            hUpdate() {
                const form = this.form;
                update(form).then(res => {
                    console.log(res);
                    this.dialogVisible = false;
                    this.$emit("update-load");
                });
            },
            // 取消按钮
            cancel() {
                this.dialogVisible = false;
            }
        },
        computed: {
            creatTitle() {
                return this.form.id ? "修改文章" : "新增文章";
            }
        }
    };
</script>

<style lang="scss" scoped>
    .quill-editor {
        height: 180px;
    }

    .video {
        margin-top: 70px;
    }

    .ql-align-center>img {
        width: 100%;
    }
</style>